<template>

  <!--  第一个是对象信息 ObjectInfo-->
  <!--  第二个是DLL 表信息-->
  <div id="objectInfo">
    <n-row>
      <!--      图标-->
      <n-col span="24"
             style="height: 8%;text-align: center;border-bottom: 1px solid #f0f0f0;border-top:  1px solid #ffffff">
        <!--      object_info  -->
        <n-icon id="object_info" size="16" :color=" choose === 'object_info' ?  '#1B83FB' : '#7b7c7d' "
                @click="iconClick('object_info')">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
            <g fill="none">
              <path
                  d="M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9l-.008-.09zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0zM18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0zM3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0z"
                  fill="currentColor"></path>
            </g>
          </svg>
        </n-icon>
        <n-icon id="tableInfo" size="16" :color=" choose === 'object_info' ? '#7b7c7d' : '#1B83FB' "
                @click="iconClick('tableInfo')">
          <svg xmlns="http://www.w3.org/2000/svg"
               style="margin-left: 2px;border: 1px solid #7b7c7d;pointer-events: none;">
            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="8">
              DDL
            </text>
          </svg>
        </n-icon>
      </n-col>

      <!--        object_info-->

      <n-col span="24" style="margin-left: 4%;" v-if="choose === 'object_info'">
        <n-col span="24" v-if="ObjectInfoType === ViewObjectOperationEnum.TABLE && tableObjectQueryInfo">
          <n-col span="5">
            <n-icon size="50" :color=" '#3A84BF' ">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
                <path
                    d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"
                    fill="currentColor"></path>
              </svg>
            </n-icon>
          </n-col>

          <n-col span="15" v-if="tableObjectQueryInfo">
            <p>{{ tableObjectQueryInfo.table_name }}</p>
            <p>表</p>
          </n-col>
          <n-col span="4">

          </n-col>
          <n-col span="24">
            <div style="font-size: 15px;color: #7d7c7a;line-height: 2;" v-if="tableObjectQueryInfo">
              <p>行</p>
              <p>{{ tableObjectQueryInfo.table_rows || '0' }}</p>
              <p>引擎</p>
              <p>{{ tableObjectQueryInfo.engine || 'InnoDB' }}</p>
              <p>自动递增</p>
              <p>{{ tableObjectQueryInfo.auto_increment || '0' }}</p>
              <p>行格式</p>
              <p>{{ tableObjectQueryInfo.row_format }}</p>
              <p>修改日期</p>
              <p>{{ tableObjectQueryInfo.update_time }}</p>
              <p>创建时间</p>
              <p>{{ tableObjectQueryInfo.create_time }}</p>
              <p>索引长度</p>
              <p>{{ tableObjectQueryInfo.index_length }} bytes</p>
              <p>数据长度</p>
              <p>{{ tableObjectQueryInfo.data_length }}</p>
              <p>排序规则</p>
              <p>{{ tableObjectQueryInfo.table_collation }}</p>
              <p>注释</p>
              <p>{{ tableObjectQueryInfo.table_comment }}</p>
            </div>
          </n-col>
        </n-col>


        <!--数据库信息-->
        <n-col span="24" v-else-if="ObjectInfoType === ViewObjectOperationEnum.DATABASE"  style="margin-top: 10%">
          <n-col span="6" style="text-align: center;">
            <n-icon size="50" color="#089910">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512">
                <path
                    d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"
                    fill="currentColor"></path>
              </svg>
            </n-icon>
          </n-col>
          <n-col span="18">
            <p>
              {{viewObjectData.dataBase}}
            </p>
            <p v-if="viewObjectData.tableSize">
              {{viewObjectData.tableSize || 0}} &nbsp; 表
            </p>


          </n-col>


        </n-col>
        <!--        链接信息-->
        <n-col span="24" v-else-if="ObjectInfoType === ViewObjectOperationEnum.CONNECT_INFO">

        </n-col>
        <n-col span="24" v-else>
          无选中数据
        </n-col>
      </n-col>
      <n-col span="24" v-else>
        <div v-if="ObjectInfoType === ViewObjectOperationEnum.TABLE">
          <p style="white-space: pre-line;">{{ tableObjectStruct }}</p>
        </div>
        <div v-else>没有可用DDL。</div>
      </n-col>


    </n-row>


  </div>

</template>

<script setup lang="ts">
import {PropType, ref, watchEffect, computed, watch} from 'vue'
import {ipcRenderer} from 'electron'
import { format } from 'sql-formatter';
import TabListInfo from "./TabCenter/TabListInfo";
import {
  ViewObjectOperationEnum, ViewObjectData, TableObjectQueryInfo
} from './object/ViewObjectData'
//当前选中的元素
const choose = ref<string>('object_info');
const tableObjectQueryInfo = ref<TableObjectQueryInfo>();
const tableObjectStruct = ref();
const ObjectInfoType = ref<Number>(ViewObjectOperationEnum.TABLE)
//对象列表，可能是表对象数据 也可以函数数据等等
// defineProps 是在 <script setup> 中隐式可用的
const props = defineProps({
  //可能是数据库或者是表
  viewObjectData: {
    type: Object as PropType<ViewObjectData>,
    default: () => undefined
  }
});

const iconClick = (type) => {
  console.log("点击", type)
  choose.value = type;


}
watch(() => props.viewObjectData, (newValue, oldValue) => {
  if (props.viewObjectData) {
    console.log("watch viewObjectData", newValue, oldValue)
    ObjectInfoType.value = <Number>newValue?.type;

    // 当viewObjectData变化时，你可以在这里执行你需要的方法
    if (newValue?.type === ViewObjectOperationEnum.TABLE) {
      ipcRenderer.invoke('get_table_info', newValue.id,
          newValue.dataBase, newValue.tableName).then(res => {
        tableObjectQueryInfo.value = res;
        console.log("get_table_info", tableObjectQueryInfo)
      }).catch(res => {
        console.log("链接错误", res)
      })

      ipcRenderer.invoke('get_table_struct_info', newValue.id,
          newValue.dataBase, newValue.tableName).then(res => {
            // let formatSql = format(res['Create Table'], {
            //   language: 'mysql'
            // })
        console.log("get_table_struct_info", res)
        tableObjectStruct.value = res['Create Table'];
      }).catch(res => {
        console.log("链接错误", res)
      })
    }
  }


});

</script>

<style scoped>
#objectInfo {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

</style>